<template>
    <table>
        <tr>
            <th>
                <input type="checkbox" v-model="checkAll" @change="handleChange" />
            </th>
            <th>名称</th>
            <th>价格</th>
            <th>减少</th>
            <th>数量</th>
            <th>增加</th>
            <th>总计</th>
        </tr>
        <tr v-for:="(item,index) in goods" :key="index">
            <td>
                <input type="checkbox" v-model="checked" name="goods" :value="item.name" />
            </td>
            <td>{{ item.name }}</td>
            <td>{{ item.price }}</td>
            <td @:click="handleDec(item)">-</td>
            <td>{{ item.count }}</td>
            <td @:click="handleInc(item)">+</td>
            <td>{{ (item.price * 100 * item.count) / 100 }}</td>
        </tr>
        <tr>
            <td colspan="7">{{ checked.join(",") }}</td>
        </tr>
        <tr>
            <td colspan="6">总金额:</td>
            <td>{{ total }}</td>
        </tr>
    </table>
</template>
<script setup>
import { ref, reactive, computed, } from "vue"
let goods = ref([
    { name: "苹果", price: 2.38, count: 3 },
    { name: "香蕉", price: 3.37, count: 1 },
    { name: "橘子", price: 6.34, count: 2 },
    { name: "西瓜", price: 0.99, count: 6 },
]);
let checkAll = ref(false);
let checked = ref([]);
function handleDec(obj) {
    if (obj.count === 1) {
        alert("数量不能少于1")
        return;
    }
    obj.count--;
}
function handleInc(obj) {
    obj.count++;
}
function handleChange() {
    if (checkAll.value) {
        checked.value = goods.value.map(v => v.name);
    } else {
        checked.value = [];
    }
}
let total = computed(() => {
    let n = 0;
    goods.value.forEach(v => {
        if (checked.value.includes(v.name)) {
            n += v.price * v.count;
        }
    });
    return n.toFixed(2);
})
</script>
<style>
table {
  width: 600px;
  display: block;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-collapse: collapse;
}
td,
th {
  border: 1px solid #ccc;
  width: 100px;
  text-align: center;
  cursor: default;
  user-select: none;
}

tr {
  height: 30px;
}
</style>